<template>
	<view class="">
		<view class="" style="width: 700rpx;margin: 10rpx auto;margin-top: 50rpx;">
			<view
				style="width: 100%; position: relative; z-index: 10 ; border-radius: 15px; background-color: white; height: 60rpx; display: flex; align-items: center; justify-content: space-between;">
				<view
					style="width: 100rpx; height:45rpx ; border-radius: 10px;  margin-right: 0rpx; display: flex; justify-content: center; align-items: center;color: #fff;">
					<image style="width: 30rpx;height: 30rpx;" src="../../static/search.png" mode=""></image>
				</view>
				<input v-model="searchName" type="text" style=" width: 100%; font-size: 28rpx; " :placeholder="`请输入要搜索的内容`"
					 />
				<view @click="sousuo"
					style="width: 155rpx; height:45rpx ; font-size:26rpx;border-radius: 10px; background-color: orangered; margin-right: 10rpx; display: flex; justify-content: center; align-items: center;color: #fff;">
					搜索
				</view>
			</view>
		</view>
		
		<view class="" style="margin-top: 50rpx;">
			<view class=""
				style="color: #FFFFFF;line-height: 50rpx;width: 20%;background-color: orangered;border-radius: 30rpx;text-align: center;font-size: 24rpx;">
				{{changci}}场次
			</view>
			<view class="" style="width: 50%;line-height: 50rpx;text-align: center;font-size: 24rpx;">
				00:{{minutes}}:{{seconds}}
			</view>
		</view>
		
		<view class="" style="width: 95%;background-color: #fff;margin: 0 auto;">
			<view class="sp" style="display: flex;justify-content: space-between;padding: 20rpx;" v-for="(item,index) in timeSHA" :key="index">
				<view class="" style="display: flex;">
					<view class="">
						<image style="width: 120rpx;height: 120rpx;" src="../../static/toux.jpg" mode=""></image>
					</view>
					<view class="" style="padding: 10rpx;">
						<view class="">
							{{item.title}}
						</view>
						<view class="">
							仅剩 20 份
						</view>
						<view class="">
							￥{{item.discount_price}} 
						</view>
					</view>
				</view>
				
				<view @click="addShopCart(item)" class="" style="width: 150rpx;height: 50rpx;background-color: rgba(252,84,108);text-align: center;line-height: 50rpx;color: #fff;border-radius: 20rpx;margin-top: 50rpx;">
					马上抢
				</view>
				
			</view>
		</view>
		
		
		<view class="gwc" v-if="popshow == false">
			<view class="" style="margin: 20rpx;" @click="popshow=true">
				<u-icon name="shopping-cart" color="#EFAA32 " size="40"></u-icon>
				<view class="shul">
					{{totalNumber||0}}
				</view>
		
				<view class="" style="margin-left: 100rpx;color: #E36444;">
					￥{{totalPrice||0}}
				</view>
			</view>
		
			<view class="jiesuan" @click="goOrderOther">
				结算
			</view>
		
		
		</view>
		
		
		
		
		<u-popup :show="popshow" @close="popshow=false">
			<view style="max-height: 500rpx;overflow: auto;">
				<view class="canpin" v-for="(item,index) in cartList" :key="index">
					<view class="" style="margin-left: 20rpx;">
						<image style="width: 120rpx;height: 120rpx;" :src="item.good.images" mode=""></image>
					</view>
					<view class="" style="margin-left: 20rpx;font-size: 26rpx;width: 60%;">
						<view class="" style="width: 100%;">
							{{item.good.title}}
						</view>
						<view class="" style="display: flex;font-size: 26rpx;">
							<view class="" style="width: 50%;">
								<p style="color: #ccc;">月售 {{item.good.status}}</p>
								<p style="">￥{{item.good.discount_price}}</p>
							</view>
							<view class=""
								style="display: flex;align-items: center;text-align: center;width: 50%;margin-top: 30rpx;">
								<view class="anniu" @click="subtractionCard(item)">
									-
								</view>
								<view class="" style="margin-left: 20rpx;">
									{{item.number}}
								</view>
								<view class="anniu" @click="addCard(item)">
									+
								</view>
							</view>
						</view>
					</view>
		
				</view>
				<view class="jiesuan2" @click="goOrderOther">
					结算
				</view>
			</view>
		</u-popup>
		
		
		
		
		
	</view>
	
	
	
</template>

<script>
	export default {
		data(){
			return {
				timeSHA:[],
				changci:'',
				djsTime:'',
				remainingTime: 0,
				minutes: 0,
				seconds: 0,
				popshow: false,
				cartList:[],
				cartsShop:[],
				totalNumber:'',
				totalPrice :'',
				searchName:'',
				
				
			}
		},
		onShow() {
			this.getCartList()
		},
		methods:{
			getTimeSha() {
			  // timeDay
			  this.$req('GET', this.$api.timeDay, {}).then(res => {
			    this.changci = res.data.info.title;
			    this.timeSHA = res.data.list.data;
			    // this.djsTime = res.data.during;
			    this.remainingTime = res.data.during;
			
			    const interval = setInterval(() => {
			      this.remainingTime--;
			      this.minutes = Math.floor(this.remainingTime / 60);
			      this.seconds = this.remainingTime % 60;
			      if (this.remainingTime <= 0) {
			        clearInterval(interval);
			      }
			    }, 1000);
			
			    console.log(this.timeSHA, '查看res显示秒杀');
			  });
			},
			addShopCart(item){
				this.$req('POST',this.$api.setCart,{
					goods_id:item.id,
					user_id:uni.getStorageSync('userId')
				}).then(res =>{
					this.getCartList()
				})
			},
			getCartList(){
				this.$req('POST',this.$api.cartList,{
					user_id:uni.getStorageSync('userId')
				}).then(res =>{
					
					this.cartList = res.data.list
					console.log(this.cartList,'查看获取的购物车列表')
					this.totalNumber = this.cartList.reduce((sum, item) => sum + item.number, 0);
					
					// this.totalPrice = this.cartList.reduce((sum, item) => sum + item.number * parseFloat(item.good.discount_price), 0);
					this.totalPrice = this.cartList.reduce((sum, item) => sum + item.number * parseFloat(item.good.discount_price), 0);
					this.totalPrice = this.totalPrice.toFixed(2);
					console.log(this.totalPrice,'this.totalPrice');
					
					// cartsShop
					this.cartsShop = this.cartList.map(item => ({ goods_id: item.goods_id, number: item.number }));
					
					console.log(this.cartsShop,'1111')
					
					
					
				})
			},
			goOrderOther(){
				uni.navigateTo({
					url: '/order-pkg/orderOther/orderOther'
				})
			},
			sousuo(){
				this.$req('GET', this.$api.timeDay, {
					keyword:this.searchName
				}).then(res => {
				  this.changci = res.data.info.title;
				  this.timeSHA = res.data.list.data;
				  // this.djsTime = res.data.during;
				  this.remainingTime = res.data.during;
							
				  const interval = setInterval(() => {
				    this.remainingTime--;
				    this.minutes = Math.floor(this.remainingTime / 60);
				    this.seconds = this.remainingTime % 60;
				    if (this.remainingTime <= 0) {
				      clearInterval(interval);
				    }
				  }, 1000);
							
				  console.log(this.timeSHA, '查看res显示秒杀');
				});
			}
			
			
			
			
			
			
			
			
			
			
		},
		mounted() {
		    this.getTimeSha();
		},
	}
</script>

<style>
	page {
		background: #eee;
	}
	
	.gwc {
		width: 100%;
		height: 128rpx;
		position: fixed;
		bottom: 50rpx;
		/* background-color: red; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 99999999;
	}
	
	.jiesuan{
		width: 230rpx;
		height: 80rpx;
		background-color: #EF6232;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 10rpx 30rpx;
	
	}
	
	
	.jiesuan2 {
		width: 230rpx;
		height: 80rpx;
		background-color: #EF6232;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		border-radius: 40rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		margin-top: 20rpx;
	
	}
	
	
	.shul {
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		background-color: #E36444;
		border-radius: 50%;
		margin-top: -80rpx;
		margin-left: 70rpx;
	
	}
	
	.canpin {
		width: 100%;
		display: flex;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 40rpx;
		z-index: 9999;
		margin-bottom: 40rpx;
	
	}
	
	
	.anniu {
		width: 40rpx;
		height: 40rpx;
		background-color: orange;
		margin-left: 20rpx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		line-height: 40rpx;
	}
	
	
	
	
	
	
	
	
	
	
	
	
</style>